<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模板引用</title>
    <script src="../public/vue_3.2.36.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>Vue中这里叫做模板引用</h1>
      一般输入框中访问模板引用：<input ref="input" />
      <hr />
      在v-for中的模板引用：
      <ul>
        <li v-for="item in list" ref="itemRefs">{{ item }}</li>
      </ul>
      <hr />
      ​函数模板中引用：
      <p>
        除了使用字符串值作名字，ref attribute
        还可以绑定为一个函数，会在每次组件更新时都被调用。该函数会收到元素引用作为其第一个参数
      </p>
      <input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }" />
      <p>你当然也可以绑定一个组件方法而不是内联函数。注意我们这里需要使用动态的 :ref 绑定才能够传入一个函数。</p>
      <input :ref="todo" />
    </div>
    <script>
      const { createApp, ref, onMounted } = Vue;
      // 为了通过组合式 API 获得该模板引用，我们需要声明一个同名的 ref：
      // 声明一个 ref 来存放该元素的引用
      // 必须和模板里的 ref 同名
      const input = ref(null);

      //当在 v-for 中使用模板引用时，对应的 ref 中包含的值是一个数组，它将在元素被挂载后包含对应整个列表的所有元素
      const list = ref(["web前端开发", "java程序设计", "软件工程", "操作系统"]);
      const itemRefs = ref([]);
      const todo = (el) => {
        console.log(el,"2222");
      };
      createApp({
        setup() {
          onMounted(() => {
            input.value.focus();
            console.log(itemRefs.value);
          });
          return {
            input,
            list,
            itemRefs,
            todo,
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
